<template>
  <!-- 线段 配置 -->
  <a-form
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="vertical"
    ref="formRef"
    :rules="rules"
    :disabled="!configData.isEdit"
  >
    <a-form-item label="线段宽度(px)">
      <a-input-number v-model:value="form.height" class="formInput" />
    </a-form-item>
    <a-form-item label="线段长度(px)">
      <a-input-number v-model:value="form.width" class="formInput" />
    </a-form-item>
  </a-form>
  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button v-if="!configData?.isEdit" type="primary" @click="handleEdit"
      >编辑</a-button
    >
    <a-button
      v-else
      type="primary"
      @click="onSubmit"
      :loading="stionConfigState.configDataSaveLoading"
      >保存</a-button
    >
  </a-form-item>
</template>
<script setup>

import { EQUIP_TYPE } from "@/constants/stationConfig";
import { useStionConfigStore } from "@/stores/stationConfig";
const { stionConfigState, changeConfigData } = useStionConfigStore();
const configData = computed(() => stionConfigState.configData);
const emits = defineEmits(["getConfig"]);
import { cloneDeep } from "lodash-es";
const form = ref({
  width: 200,
  height: 4,
  type: EQUIP_TYPE.LINE,
});
watch(
  () => stionConfigState.configData,
  (val) => {
    form.value = cloneDeep(stionConfigState.configData);
    if (!form.value.width) {
      form.value.width = 200;
    }
  },
  { deep: true, immediate: true }
);

const rules = ref({});
const formRef = ref();
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      form.value.type = EQUIP_TYPE.LINE;
      emits("getConfig", toRaw(form));
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
const handleEdit = () => {
  changeConfigData({
    ...stionConfigState.configData,
    isEdit: true,
  });
};
</script>
<style lang="less" scoped>
.formInput {
  width: 175px;
}
.formSelect {
  width: 175px;
  text-align: left;
}
</style>